<!--
- Author:   .
- Date:    2018/1/11 0011.
- File:    积分/经验值提现到银行卡.
-->
<template>
  <div style="margin-bottom: 50px">
    <div class="Withdrawals">
      <ul>
        <p class="pl20" style="line-height: 35px;" v-if="type == '3'">当前可用股权积分: <span>{{memberInfo.stock}}</span>
          <span>, 可转出：{{stockTransferMax | toFixed(0)}}</span></p>
        <p class="pl20" style="line-height: 35px;" v-if="type == '2'">当前可用积分: <span>{{memberInfo.freeze_balance}}</span>
        </p>
        <p class="pl20" style="line-height: 35px;" v-if="type == '1'">当前可用经验值: <span>{{memberInfo.balance}}</span></p>

      </ul>
    </div>
    <div class="EditReceiptAddress">
      <ul>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-tel"></i></div>
          <div class="fl w550">
            <input type="tel"  class="inp" placeholder="请输入提现金额" v-model="withdrawMoney">
          </div>
        </li>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-tel"></i></div>
          <div class="fl w550">
            <!--<span>{{memberInfo.member_mobile}}</span>-->
            <input type="tel" class="inp" placeholder="输入账号(手机号)" v-model="mobile">
          </div>
        </li>
        <!--<li class="login_ipt" style="position: relative; margin-bottom: 0; border-bottom: 1px solid #dcdddd">-->
        <!--<i class="iconfont icon-edit" style="position: absolute; top: 13px; left: 0.5rem; font-size: 14px;"></i>-->
        <!--<input type="text" placeholder="图形验证码" style="text-indent: 1.25rem;" v-model="imgCode">-->
        <!--<div style="position: absolute; right: 10px; top: 8px;width: 120px; height: 27px; line-height: 26px; border: 1px solid #aaa">-->
        <!--<img style="width: 90px; height: 26px;" :src="imgCodeSrc" alt="">-->
        <!--<span style=" position: absolute; right: 0; top: 0; display: inline-block; height: 26px; width: 30px; line-height: 26px;text-align: center" @click="getImgCode">刷新</span>-->
        <!--</div>-->
        <!--</li>-->
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-postcode"></i></div>
          <div class="fl w550">
            <input type="tel" class="inp" placeholder="填写验证码" v-model="secode">
            <message-code :classes="'yanzm'" :sended-style="sendedStyle" :tel="mobile" :imgcode="imgCode" type="2" :callback="handleMessageCode"></message-code>
          </div>
        </li>
      </ul>
    </div>
    <p class="withr" v-if="type == '1' || type == '2'">提现金额需为100的倍数<br/>每日限提现一次，在系统未审核前可撤消重新申请<br/>提现不扣除手续费，实际到账金额为：<span>{{realMoney | toFixed(2)}}</span>元<br/>到账时间为申请后第十天15：00前
    </p>
    <p class="withr" v-if="type == '3'">在平台注册时间一年以上者，每年2月最后一天可申请将15%的股权积分提现<br/>提现金额需为10的倍数<br/>在系统未审核前可撤消重新申请<br/>提现将扣除{{memberInfo.w_rate == '0.002' ? '千分之二' : memberInfo.w_rate}}手续费，实际到账金额为：<span>{{realMoney | toFixed(2)}}</span>元<br/>到账时间为申请后第十天15：00前
    </p>
    <!--<div class="suborbox f-cb">-->
      <!--<span class="nim" style="float: left">提现类型</span>-->
      <!--<div class="subornat"><i class="iconfont icon-downdot"></i>-->
        <!--<select v-model="pay_type">-->
          <!--<option :value="0">银行卡</option>-->
          <!--<option :value="1">支付宝</option>-->
          <!--&lt;!&ndash;<option :value="$dictionary.userLv.c">三级</option>&ndash;&gt;-->
        <!--</select>-->
      <!--</div>-->
    <!--</div>-->

    <div class="addbank" v-show="bankcardList.requested && bankcardList.data.length <= 0" @click="gotoAddBankcard">
      <a>+添加银行卡</a>
    </div>
    <div class="Withdrawals mt10" v-show="bankcardList.requested && bankcardList.data.length > 0">
      <ul>
        <li><label><span class="nim">开户名</span><input type="text" disabled="disabled" placeholder="请输入真实姓名" v-model="bankcard.account_name"></label>
        </li>
        <li><label><span class="nim">开户行</span>{{bankcard.bank_name}}</label></li>
        <li>
          <label><span class="nim">卡号</span><input type="tel" disabled="disabled" placeholder="请输入银行卡号" v-model="bankcard.member_bank_num"><span @click="gotoBankcardList">切换</span></label>
        </li>
        <li>
          <label><span class="nim">联系电话</span><input type="tel" disabled="disabled" placeholder="请输入联系电话" v-model="bankcard.member_mobile"></label>
        </li>
      </ul>
    </div>
    <!--<p class="tistext2" v-show="type == '2'">此类型将十天后到账</p>-->
    <div class="pl20 pr20 mt35">
      <a class="but_1 wauto disb tc" @click="confirmPwd">提交</a>
    </div>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import messageCode from '../../components/message-code.vue'
  // import payPwd from '../../components/payPwd'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo', bankcardList: 'bankcardList'}),
      mapRules({need: ['memberInfo', 'bankcardList']})
    ],
    data() {
      return {
        sendedStyle: {color: '#999999', border: '1px solid #999999'}, // 验证码发送后的验证码按钮样式
        mobile: '',
        secode: '',
        imgCode: '', // 图片验证码
        type: '2', // 2 积分 3 股权
        bankcardId: this.$route.query.bankcard || '3',
        withdrawMoney: '',
        bankcardExist: false,
        pay_type: 0
      }
    },
    components: {
      'message-code': messageCode
    },
    watch: {
      withdrawMoney: function (newValue) {
        if (newValue == '') {
          return
        }
        let maxMoney = 0
        if (this.type == '1') {
          maxMoney = this.memberInfo.balance
        } else if (this.type == '2') {
          maxMoney = this.memberInfo.freeze_balance
        } else if (this.type == '3') {
          maxMoney = this.stockTransferMax.toFixed(0)
        }
        if (parseFloat(newValue) > parseFloat(maxMoney)) {
          this.$toast('超出了最大可用额')
          this.withdrawMoney = maxMoney
        }
      }
    },
    created() {
      this.mobile = this.memberInfo.member_mobile || ''
    },
    computed: {
      // 可转出的股权积分
      stockTransferMax: function () {
        if (this.memberInfo.stock) {
          return this.memberInfo.stock * 0.15
        }
        return 0
      },
      // 抵扣的余额
      realMoney () {
        let result = ''
        if (this.withdrawMoney) {
          result = this.withdrawMoney - this.withdrawMoney * this.memberInfo.w_rate
        }
        return result
      },
      bankcard () {
        if (this.$route.query.bankcard) {
          for (let i = 0; i < this.bankcardList.data.length; i++) {
            if (this.bankcardList.data[i].mb_id == this.$route.query.bankcard) {
              return this.bankcardList.data[i] // 使用指定银行卡
            }
          }
        } else {
          for (let i = 0; i < this.bankcardList.data.length; i++) {
            if (this.bankcardList.data[i].is_default === '1') {
              return this.bankcardList.data[i] // 使用默认银行卡
            }
          }
          if (this.bankcardList.data.length > 0) {
            return this.bankcardList.data[0] // 没有默认银行卡，使用第一个银行卡
          }
        }
        return {} // 没有银行卡
      }
    },
    methods: {
      handleMessageCode(code) {
      },
      moneyLimit() {
        let restMoney = this.withdrawMoney % 100 // 余数
        if (restMoney > 0) {
          this.$toast('提现金额需要为100的倍数')
          this.withdrawMoney = this.withdrawMoney - restMoney
          return
        }
      },
      gotoAddBankcard() {
        this.$router.push({name: 'bankcard-edit', query: {type: this.type, from: 'account-withdraw'}})
      },
      gotoBankcardList() {
        this.$router.push({name: 'bankcard-list', query: {type: this.type, from: 'account-withdraw'}})
      },
      confirmPwd() {
        let restMoney = this.withdrawMoney % 100 // 余数
        if (restMoney > 0) {
          this.$toast('提现金额需要为100的倍数')
          this.withdrawMoney = this.withdrawMoney - restMoney
          return
        }
        if (!this.withdrawMoney) {
          this.$toast('请输入提现金额')
          return
        }
        if (!this.bankcard.mb_id) {
          this.$toast('请选择银行卡')
          return
        }
        this.$indicator.open('处理中...')
        this.$request.withdraw(this.type, this.bankcard.mb_id, this.withdrawMoney, this.mobile, this.secode).then(data => {
          this.$indicator.close()
          this.$toast('提交成功')
          this.$router.push({name: 'account-index'})
        }).catch(e => {
          this.$indicator.close()
          this.$toast('转出到银行卡：' + e.msg)
          console.error('提现失败', e)
        })
        // payPwd({}, this.withdraw)
      },
      withdraw() {
        this.$indicator.open('处理中...')
        this.$request.withdraw(this.type, this.bankcard.mb_id, this.withdrawMoney, this.mobile).then(data => {
          this.$indicator.close()
          this.$toast('提交成功')
          this.$router.push({name: 'account-index'})
        }).catch(e => {
          this.$indicator.close()
          this.$toast('转出到银行卡：' + e.msg)
          console.error('提现失败', e)
        })
      }
    }
  }
</script>

<style>

</style>
